<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link href="picobox.css" type="text/css" rel="stylesheet"></link>
 </head>
 <body>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
  <script type="text/javascript" src="picobox.js"></script>
   <div>
 <div id="loginBox" style="display:none;" >
   <form name='xx'>
    <div>username<input type="text" name="username"/></div>
    <div>password<input type="password" name="password"/></div>
    <div><input type="submit" value="submit"/></div>
   </form>
 </div>
 <input type="button" value="show" onclick="demoShow()" />
  
 <input type="button" value="show iframe" onclick="demoShowIFrame()"/>
 
 <input type="button" value="show text" onclick="demoShowText()"/>
 
 <input type="button" value="show dom" onclick="demoShowDOM()"/>

 </div>
 <div><select><option>select box</option></select></div>
  <script type="text/javascript">
   function demoShow() {
    Picobox.show(
    'PicoBox Demo',
    '<p>PicoBox Demo. <b>PicoBox Demo. </b>PicoBox Demo. PicoBox Demo. PicoBox Demo. PicoBox Demo. </p>',
    {'width':480,
    'height':360,
    'maskOpacity':0.3,
    'maskColor':'#00f'
   });
   }
   
   function demoShowIFrame() {
    Picobox.showIFrameBox(
    'PicoBox Demo',
    'picobox_frame.html',
     {'width':480,
     'height':360
    })
   }
   
   function demoShowText() {
    Picobox.showTextBox(
    'PicoBox Demo',
    'this is a text box. <picobox> this is a text box. <picobox>')
   }
   
   function demoShowDOM() {
	
    Picobox.showDOMBox(
    'PicoBox Demo',
    '#loginBox')
   }   
  </script>

 </body>
</html>
